<template>
	<view class="user-coupon">
		<movable-area class="go-home">
			<movable-view direction="all" class="go-home-img">
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/enter-course.png" @click="goCourse"></image>
			</movable-view>
		</movable-area>
		<view class="user-coupon-tabs">
			<u-tabs
				:is-scroll="false"
				:list="tabList"
				:current="tabIndex"
				@change="tabChange"
				inactive-color="#666"
				active-color="#141414"
				font-size="28"
				bg-color="#FFF">
			</u-tabs>
		</view>
		<view class="coupon-list">
			<view class="coupon-item" v-for="(data,index) in list" :key="index" :class="{disabled: data.status==2 || data.status==3}">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/is_use.png" v-if="data.status==2" class="status"></image>
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/is_invalid.png" v-if="data.status==3" class="status"></image>
				<view class="coupon-item-info">
					<view class="coupon-item-left">
						<view class="coupon-price" v-if="data.coupon.type==1">￥<text>{{data.coupon.money}}</text></view>
						<view class="coupon-price" v-if="data.coupon.type==2"><text>{{data.coupon.discount}}</text>折</view>
						<view class="coupon-des" v-if="data.coupon.type==1">满{{data.coupon.satisfy_money}}可用</view>
					</view>
					<view class="coupon-item-center">
						<view class="coupon-name">{{data.coupon.coupon_name}}</view>
						<view class="coupon-time">有效期：{{data.end_time}}</view>
					</view>
				</view>
				<view class="coupon-item-userInfo">
					<image :src="data.user.heard_img" mode="aspectFill"></image>
					<view class="coupon-item-userInfo-text">
						<view class="name">{{data.user.nickname}}</view>
						<view class="phone">联系方式：{{data.user.phone}}</view>
					</view>
					<view class="browseList" @click="goBrowseList(data.user.user_id)">浏览记录 <u-icon name="arrow-right"></u-icon></view>
				</view>
			</view>
		</view>
		<pt-nothing
			icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1"
			:fixed="true"
			top="80"
			bottom="120"
			:text="tips" 
			v-if="noMore && !list.length">
		</pt-nothing>
		<view class="user-coupon-btn">
			<view class="user-coupon-btn-text" @click="goCouponList">赠送优惠券</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{name: '全部'},{name: '未使用'},{name: '已使用'},{name: '已失效'}],
				list: [],
				noMore: false,
				loading: false,
				page: 0,
				status: '',
				tips: '暂无用户已领取优惠券'
			};
		},
		onLoad() {
			this.AddFoot('我的-赠送优惠券-领取列表')
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.loading = true
				this.init()
			}
		},
		methods: {
			init(){
				let data = {
					page: this.page,
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					// user_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
					status: this.status,
					giving_id: JSON.parse(uni.getStorageSync('userInfo')).user_id
				}
				this.$u.api.CouponGivingList(data).then(res => {
					this.loading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.list.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			tabChange(e){
				this.tabIndex = e
				switch (e){
					case 0:
						this.status = ''
						break;
					case 1:
						this.status = 1
						break;
					case 2:
						this.status = 2
						break;
					case 3:
						this.status = 3
						break;
				}
				this.page = 0
				this.list = []
				this.noMore = false
				this.init()
			},
			goCouponList(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-coupon/user-coupon-list',
					success: () => {
						this.AddFoot('我的-赠送优惠券-可赠送优惠券列表')
					}
				})
			},
			AddFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP
					type: 1,
					// #endif
					//#ifdef APP-PLUS
					type: 2,
					// #endif
					//#ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0
				})
			},
			goBrowseList(user_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-dynamic/user-dynamic-info/user-dynamic-info?type=1&user_id='+user_id
				})
				this.AddFoot('我的-赠送优惠券-领取列表-浏览记录')
			},
			goCourse(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-coupon/user-coupon-course'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8;
	}
	.user-coupon {
		padding-bottom: 150rpx;
		.coupon-list{
			padding: 30rpx;
			.coupon-item{
				margin-bottom: 40rpx;
				position: relative;
				&.disabled{
					opacity: .7;
				}
				.status{
					position: absolute;
					right: 0;
					top: 0;
					width: 101rpx;
					height: 105rpx;
				}
				.coupon-item-info{
					display: flex;
					background-color: #FFF;
					border-radius: 8rpx;
					overflow: hidden;
					.coupon-item-left{
						width: 180rpx;
						height: 150rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;
						.coupon-price{
							margin-bottom: 10rpx;
							color: #F59359;
							text{
								font-size: 42rpx;
							}
						}
						.coupon-des{
							font-size: 20rpx;
							color: #999;
						}
					}
					.coupon-item-center{
						flex: 1;
						min-width: 0;
						padding: 0 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						.coupon-name{
							font-size: 32rpx;
							margin-bottom: 20rpx;
						}
						.coupon-time{
							color: #999;
							font-size: 24rpx;
						}
					}
				}
				.coupon-item-userInfo{
					display: flex;
					align-items: center;
					padding: 20rpx 35rpx;
					border-top: solid 1px #EEE;
					background-color: #FFF;
					image{
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
						border: solid 1px #EEE;
					}
					.coupon-item-userInfo-text{
						flex: 1;
						min-width: 0;
						margin: 0 20rpx;
						.name{
							color: #4D4D4D;
							font-size: 24rpx;
						}
						.phone{
							color: #808080;
							font-size: 20rpx;
							margin-top: 10rpx;
						}
					}
					.browseList{
						font-size: 22rpx;
						color: #808080;
					}
				}
			}
		}
		.user-coupon-btn{
			height: 120rpx;
			padding: 15rpx 75rpx 0;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			border-top: solid 2rpx #EEE;
			background-color: #FFF;
			.user-coupon-btn-text{
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 8rpx;
				color: #FFF;
				background-color: #141414;
				font-size: 32rpx;
				text-align: center;
			}
		}
		.go-home{
			position: fixed !important;
			left: 0;
			top: 10rpx;
			bottom: 130rpx;
			left: 5px;
			right: 5px;
			pointer-events: none;
			z-index: 20;
			width: auto;
			height: auto;
			.go-home-img,.go-brand-info{
				position: absolute !important;
				width: 80rpx;
				height: 80rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 0;
				bottom: 0;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				text-align: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.go-brand-info{
				margin-bottom: 90rpx;
			}
		}
	}
</style>
